<template>
    <div>
        <div class="demo-image">
            <div v-for="(item, index) in list" :key="index" class="block">
                <el-image style="width: 200px; height: 200px" :src="item.img" :fit="cover" />
                <span class="hidden demonstration" :title="item.name">{{ item.name }}</span>
                <el-row>
                    <el-col :span="12" class="demonstration">¥{{ item.price }}</el-col>
                    <el-col :span="4" class="demonstration" @click="routeClick(item.id)"><el-icon>
                            <View />
                        </el-icon></el-col>
                    <el-col :span="4" class="demonstration" @click="cartAdd(item.id)"><el-icon>
                            <ShoppingCart />
                        </el-icon></el-col>
                    <el-col :span="4" class="demonstration"><el-icon>
                            <GoodsFilled />
                        </el-icon></el-col>
                    <el-col :span="2" class="demonstration"></el-col>

                </el-row>
            </div>
        </div>
    </div>
</template>
<script>
import { View } from "@element-plus/icons-vue"
import { ShoppingCart } from "@element-plus/icons-vue"
import { GoodsFilled } from "@element-plus/icons-vue"
import { userGoodsStore } from "../../../store/goods";
import {  ElMessageBox } from 'element-plus'

export default {

    props: ['list'],
    data() {
        return {
            data: [],
            store: userGoodsStore()
        }
    },
    components: {
        View,
        GoodsFilled,
        ShoppingCart
    },
    methods: {
        routeClick(val) {
            this.data = this.list.find(v => v.id == val)
            this.$router.push({ path: '/detail', query: this.data })//携带数据进行跳转
        },
        cartAdd(val) {
            ElMessageBox.alert('商品已加入购物车', 'Title', {
                confirmButtonText: 'OK',
            })
            this.data = this.list.find(v => v.id == val),
                this.store.cartAdd({
                    id: this.data.id,
                    name: this.data.name,
                    price: this.data.price,
                    onlineprice: this.data.onlineprice,
                    num: 1,
                    total: this.data.onlineprice
                })//调用状态管理
        },



    }

}



</script>
<style scoped>
.demo-image .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    display: inline-block;
    width: 20%;
    box-sizing: border-box;
    vertical-align: top;
}

.demo-image .block:last-child {
    border-right: none;
}

.demo-image .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.hidden {
    margin: 0 auto;
    width: 100px;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
</style>
